<template>
  <!-- 用户购物车  -->
  <div class="demo-image__placeholder">
    <el-divider></el-divider>
    <center>
      <el-card class="box-card">
        <div slot="header" class="clearfix" v-if="Address">
          <el-badge value="默认地址" class="item" type="primary">
            <el-tag type="" effect="dark"
              >签收人姓名:{{ Address.asName }}</el-tag
            >
            <el-tag type="success" effect="dark">
              电话号码:{{ Address.asTelephone }}
            </el-tag>
            <el-tag type="info" effect="dark">
              详细地址:{{ Address.asAddress }}</el-tag
            >
            <router-link to="/user/userAddress"
              ><el-button type="primary" plain>
                修改默认地址
              </el-button></router-link
            >
          </el-badge>
        </div>
        <span v-if="!Address"
          >暂无默认地址去设置
          <router-link to="/user/userAddress"
            ><el-button type="primary" plain>
              设置默认地址
            </el-button></router-link
          >
        </span>
      </el-card>
    </center>
    <el-divider></el-divider>
    <el-checkbox
      :indeterminate="indeterminate"
      v-model="checkList"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <center>
      总金额:<span style="color: Red">{{ totalprice }}元</span>
    </center>
    <el-button class="topBUtton" type="primary" @click="playShop">
      去付款
    </el-button>
    <div style="margin: 15px 0"></div>
    <el-row>
      <el-col
        style="width: 20%; height: 20%"
        :span="2"
        v-for="(list, index) in lists"
        :key="index"
      >
        <el-card body-style="{  '0px' }">
          <img :src="list.cmImg" class="image" />
          <el-badge value="购物车" class="item" type="danger ">
            <div style="padding: 24px">
              <center>
                <span>{{ list.commodity.cmName }}</span>
                <el-tag type="danger" effect="dark"
                  >￥:{{ list.scTotalPrice }}元</el-tag
                >
              </center>
              <br />
              <span>{{ list.commodity.cmSubtitle }}</span>
              <br />
              <span>颜色:{{ list.scColor }}</span>
              <br />
              <span>套餐:{{ list.scConfig }}</span>
              <br />
              <el-input-number
                v-model="list.scTotal"
                :disabled="true"
              ></el-input-number></div
          ></el-badge>
          <el-checkbox-group
            v-model="checkList"
            @change="handleCheckedCitiesChange"
          >
            <center>
              <el-checkbox :label="list.scId" style="font-size: 10px">{{
                list.commodity.cmName
              }}</el-checkbox
              >y
            </center>
          </el-checkbox-group>
        </el-card>
      </el-col>
    </el-row>
    <center>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :v-model="page"
        @current-change="currentChage"
        :prev-click="currentChage"
      >
      </el-pagination>
    </center>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      备注:<el-input></el-input>
      <span slot="footer" class="dialog-footer">
        <img :src="payImge">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="payERWM">获取支付二维码</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
import address from "@/api/address";
import order from "@/api/order"
import shopringCart from "@/api/shopringCart";
const cityOptions = [];
export default {
  data() {
    return {
      Address: {},
      indeterminate: false,
      lists: [],
      drawer: false,
      activeIndex: "1",
      dialogVisible: false,
      activeIndex2: "1",
      currentDate: new Date(),
      search: "",
      page: 1,
      size: 20,
      pages: 0,
      total: 0,
      totalprice: 0,
      checkList: [],
      orText:"",
      payImge:""
    };
  },
  created() {
    this.getList(this.page, this.size);
    this.lists = ["https://i03piccdn.sogoucdn.com/37c7aff5568041ee"];
    this.ElementAlert();
    this.findByIdDf();
  },
  methods: {
    //获取支付二维码
    payERWM() {
            order.getPay(this.checkList).then(res=>{
             this.payImge=window.URL.createObjectURL(res.data)
            })

    },
    // 付款下单
    playShop() {
      if (this.checkList.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择商品在下单",
        });
      } else {
        // 弹出 支付信息
        this.dialogVisible = true;
      }
    },

    //获取默认地址
    findByIdDf() {
      address.findByIdDf().then((res) => {
        this.Address = res.data.data.data;
      });
    },

    handleCheckAllChange() {
      if (this.checkList.length == this.lists.length) {
        this.checkList = [];
        this.indeterminate = false;
        this.totalprice = 0;
      } else {
        for (var i = 0; i < this.lists.length; i++) {
          this.checkList[i] = this.lists[i].scId;
        }
        this.indeterminate = true;
        var price = 0;
        for (var i = 0; i < this.lists.length; i++) {
          price += this.lists[i].scTotalPrice;
        }
        this.totalprice = price;
      }
    },
    handleCheckedCitiesChange() {
      //console.log(this.checkList);
      var price = 0;
      for (var i = 0; i < this.lists.length; i++) {
        for (var j = 0; j < this.checkList.length; j++) {
          if (this.lists[i].scId == this.checkList[j]) {
            price += this.lists[i].scTotalPrice;
          }
        }
      }
      this.totalprice = price;
    },

    //弹窗提示
    ElementAlert() {
      this.$notify.success({
        title: "提示！",
        message: "欢迎来到你的购物车",
        showClose: true,
        duration: 2000,
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getList(page, size) {
      shopringCart.getList(page, size).then((res) => {
        console.log(res);
        this.lists = res.data.data.list;
        this.page = res.data.data.page;
        this.size = res.data.data.size;
        this.pages = res.data.data.pages;
        this.total = res.data.data.total;
      });
    },
    currentChage(e) {
      this.getList(e, this.size, this.key);
    },
  },
};
</script>

<style >
.topBUtton {
  margin-left: 90%;
}
.top-ioc {
  position: relative;
  margin-right: 10px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>